﻿<template>
    <div>
        <el-form label-width="150px" :model="UpAttendanceDB" ref="UpAttendanceDB_ref">
            <el-row>
                <el-col :span="10" :offset="1">
                    <el-form-item label="姓名">
                        <el-input v-model="UpAttendanceDB.UserName"></el-input>
                    </el-form-item>
                </el-col>

                <el-col :span="10" :offset="1">
                    <el-form-item label="编号">
                        <el-input v-model="UpAttendanceDB.number_DD"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="2" :offset="1">
                    <el-form-item label="上班">
                        <el-checkbox label="打卡" name="type" v-model="onon" @change="ononchange"></el-checkbox>
                    </el-form-item>
                </el-col>
                <el-col :span="8" :offset="1">
                    <el-form-item label="上班时间">
                        <el-date-picker v-model="UpAttendanceDB.onclicktime"
                                        class="wmax"
                                        type="datetime"
                                        value-format="HH:mm:ss"
                                        @change="jobtimechange"
                                        placeholder="选择日期时间">
                        </el-date-picker>
                    </el-form-item>
                </el-col>

                <el-col :span="10">
                    <el-form-item label="地址">
                        <el-input v-model="UpAttendanceDB.onclickaddress"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row>
                <el-col :span="2" :offset="1">
                    <el-form-item label="下班">
                        <el-checkbox label="打卡" name="type" v-model="downdown" @change="ononchange"></el-checkbox>
                    </el-form-item>
                </el-col>

                <el-col :span="8" :offset="1">
                    <el-form-item label="下班时间">
                        <el-date-picker v-model="UpAttendanceDB.downclicktime"
                                        class="wmax"
                                        type="datetime"
                                        value-format="HH:mm:ss"
                                        @change="jobtimechange"
                                        placeholder="选择日期时间">
                        </el-date-picker>
                    </el-form-item>
                </el-col>

                <el-col :span="10">
                    <el-form-item label="地址">
                        <el-input v-model="UpAttendanceDB.downclickaddress"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="10" :offset="1">
                    <el-form-item label="考勤状态">
                        <el-checkbox label="迟到" name="type" disabled v-model="UpAttendanceDB.late"></el-checkbox>
                        <el-checkbox label="早退" name="type" disabled v-model="UpAttendanceDB.leaveearly"></el-checkbox>
                        <el-checkbox label="缺卡" name="type" disabled v-model="UpAttendanceDB.lackOfCards"></el-checkbox>
                        <el-checkbox label="旷工" name="type" disabled v-model="UpAttendanceDB.absenteeism"></el-checkbox>
                    </el-form-item>
                </el-col>

            </el-row>
            <!-- <el-row>
                      <el-col :span="10" :offset="1">
                    <el-form-item label="迟到时间" >
                        <el-input v-model="UpAttendanceDB.SectoralFunctions"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="10" :offset="1">
                    <el-form-item label="年度产值(元)" >
                        <el-input v-model="UpAttendanceDB.YearOutputValue"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>-->

            <el-row>
                <el-col :offset="1">
                    <el-form-item label="在职状态">
                        <el-checkbox label="加班" name="type" v-model="UpAttendanceDB.addwork" @change="addworkchange"></el-checkbox>
                        <el-checkbox label="请假" name="type" v-model="UpAttendanceDB.leaved" @change="leavedchange"></el-checkbox>
                        <el-checkbox label="出差" name="type" v-model="businesstravelbit" @change="businesstravelchange"></el-checkbox>
                    </el-form-item>
                </el-col>
            </el-row>



            <el-row :style="Addworksty">
                <el-col :span="6" :offset="1">
                    <el-form-item label="加班类型">
                        <el-select v-model="UpAttendanceDB.addworktype" class="wmax" required placeholder="请选择部门">
                            <el-option value="0" label="工作日">工作日</el-option>
                            <el-option value="1" label="休息日">休息日</el-option>
                            <el-option value="2" label="节假日">节假日</el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="开始">
                        <el-date-picker v-model="UpAttendanceDB.addwork_Starttime"
                                        class="wmax"
                                        value-format="HH:mm:ss"
                                        type="datetime"
                                        placeholder="选择日期时间">
                        </el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="结束">
                        <el-date-picker v-model="UpAttendanceDB.addwork_Endtime"
                                        class="wmax"
                                        type="datetime"
                                        value-format="HH:mm:ss"
                                        placeholder="选择日期时间">
                        </el-date-picker>
                    </el-form-item>
                </el-col>
            </el-row>


            <el-row :style="Addleavesty">
                <el-col :span="10" :offset="1">
                    <el-form-item label="请假类型">
                        <el-select v-model="UpAttendanceDB.leavetype" class="wmax" required>
                            <el-option :value="1" label="事假">事假</el-option>
                            <el-option :value="2" label="病假">病假</el-option>
                            <el-option :value="4" label="婚假">婚假</el-option>
                            <el-option :value="3" label="年假">年假</el-option>
                            <el-option :value="5" label="生育假">生育假</el-option>
                            <el-option :value="6" label="陪产假">陪产假</el-option>
                            <el-option :value="7" label="丧假">丧假</el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="10">
                    <el-form-item label="请假天数">
                        <el-select v-model="UpAttendanceDB.leavedday" class="wmax" required>
                            <el-option value="0.5" label="0.5天">0.5天</el-option>
                            <el-option value="1" label="1天">1天</el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="10" :offset="1">
                    <el-form-item label="开始">
                        <el-date-picker v-model="UpAttendanceDB.leave_Starttime"
                                        class="wmax"
                                        type="datetime"
                                        value-format="HH:mm:ss"
                                        placeholder="选择日期时间">
                        </el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col :span="10">
                    <el-form-item label="结束">
                        <el-date-picker v-model="UpAttendanceDB.leave_Endtime"
                                        class="wmax"
                                        type="datetime"
                                        value-format="HH:mm:ss"
                                        placeholder="选择日期时间">
                        </el-date-picker>
                    </el-form-item>
                </el-col>
            </el-row>



            <el-row :style="businesstravelsty">
                <el-col :span="10" :offset="1">
                    <el-form-item label="出差详情">
                        <el-input v-model="UpAttendanceDB.businesstravel"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="10">
                    <el-form-item label="出差天数">
                        <el-select v-model="UpAttendanceDB.businesstravelday" class="wmax" required>
                            <el-option value="0.5" label="0.5天">0.5天</el-option>
                            <el-option value="1" label="1天">1天</el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>


            <el-row>
                <el-col align="center">
                    <el-button type="success" @click="updatabtn">确认修改</el-button>
                </el-col>
            </el-row>
        </el-form>
    </div>
</template>


<script>
    export default {
        name: "UpAttendanceDD",
        props: {
            UpAttendanceDB: {
                type: Object,
                required: true
            },
        },
        watch: {
            UpAttendanceDB: function (val) {
                this.InitDB();
            }
        },

        created() {
            console.log(this.UpAttendanceDB);
            this.InitDB();
        },
        data() {
            return {
                onon: false,
                downdown: false,
                businesstravelbit: false,
                Addworksty: {
                    display: "none",
                },
                Addleavesty: {
                    display: "none",
                },
                businesstravelsty: {
                    display: "none",
                },
            }
        },
        methods: {
            //修改编辑数据信息
            updatabtn() {
              
                if (this.businesstravelbit && this.punchclock.businesstravelday == "") {
                    this.$message.error("修改失败,出差天数必填!")
                    return;
                } else {
                    this.$http.post('/UserInfo/UpdataAttendanceData', { punchclock: this.UpAttendanceDB }).then((res) => {
                        console.log(res);
                        if (res.data.flag) {
                            this.$message.success("数据修改成功")
                            this.$parent.$parent.UpAttendanceDDShow=false;
                            this.$parent.$parent.GettableDB();
                        } else {
                            this.$message.error("数据修改失败")
                        }
                    })
                }
            },
            addworkchange() {
                let val = this.UpAttendanceDB.addwork;
                if (val) {
                    this.Addworksty.display = "block";
                } else {
                    this.Addworksty.display = "none";
                }
            },
            leavedchange() {
                let val = this.UpAttendanceDB.leaved;
                if (val) {
                    this.Addleavesty.display = "block";
                } else {
                    this.Addleavesty.display = "none";
                }
            },
            businesstravelchange() {
                let val = this.UpAttendanceDB.businesstravel;
                if (val) {
                    this.businesstravelsty.display = "block";
                } else {
                    this.businesstravelsty.display = "none";
                }
            },
            InitDB() {
                if (this.UpAttendanceDB.onclicktime != "") {
                    this.onon = true;
                } else {
                    this.onon = false;
                }
                if (this.UpAttendanceDB.downclicktime != "") {
                    this.downdown = true;
                } else {
                    this.downdown = false;
                }

                if (this.UpAttendanceDB.businesstravel != '') {
                    this.businesstravelbit = true;
                } else {
                    this.businesstravelbit = false;
                }
                this.addworkchange();
                this.leavedchange();
                this.businesstravelchange();

            },

            ononchange() {
                this.UpAttendanceDB.late = false;
                this.UpAttendanceDB.leaveearly = false;
                this.UpAttendanceDB.lackOfCards = false;
                this.UpAttendanceDB.absenteeism = false;

                if (!this.onon && !this.downdown) {
                    this.UpAttendanceDB.absenteeism = true;
                    return;
                }
                if (!this.onon || !this.downdown) {
                    this.UpAttendanceDB.lackOfCards = true;
                    return;
                }
            },
            jobtimechange() {
                if (this.UpAttendanceDB.onclicktime != null) {
                    let stime = "08:30:00"
                    if (this.UpAttendanceDB.onclicktime > stime) {
                        this.UpAttendanceDB.late = true;
                    } else {
                        this.UpAttendanceDB.late = false;
                    }
                    this.onon = true;
                } else {
                    this.onon = false;
                }
                if (this.UpAttendanceDB.downclicktime != null) {
                    let endtime = "17:30:00"
                    if (this.UpAttendanceDB.downclicktime < endtime) {
                        this.UpAttendanceDB.leaveearly = true;
                    } else {
                        this.UpAttendanceDB.leaveearly = false;
                    }

                    //  let endtime = new Date(this.UpAttendanceDB.downclicktime)
                    this.downdown = true;
                } else {
                    this.downdown = false;
                }

            }
        }
    }
</script>

<style scoped>

    .wmax {
        width: 100%
    }
</style>